<template>
	<div style="background-color: white;overflow: hidden;height: 100vh
	;">
		<h2 class="title">收藏帖子</h2>
		<div class="tabs">
			<div class="item-tab" @click="change(Item)" v-for="(Item,index) in Activecollection" :key="index" :class="{active:isactive==Item.id}" >{{Item.collectionCatalogName}}
				<div class="actline" v-show="isactive==Item.id"></div>
			</div>

		</div>
		<div v-if="collectionList.length!==0">
		<div class="favorites-card" v-for="(Item,index) in collectionList" :key="index">
			<!-- <div class="favorites-cover">
				<img src="https://oceappimg.oss-cn-shenzhen.aliyuncs.com/test/learn/lesson//image/2021-06-083456.jpg" />
			</div> -->
			<div class="favorites-meta">
				<div class="meta-title">
					<a class="name ellipsis" @click="check(Item.postsId)">{{Item.title}}</a>
				</div>
				<div class="meta-status">
					<div>
						<span class="pubdate is-success">{{Item.createTime}}</span>
					</div>
					<div class="meta-view">
						<button class="el-button el-button--default" @click="DeletePost(Item.postsId)">
							<span>取消收藏</span>
						</button>
					</div>

				</div>
				<div class="meta-footer">
					<div class="view-stat">
						<i class="el-icon-view"></i>
						浏览 15
					</div>
					<div class="view-stat">
						<i class="el-icon-thumb"></i>点赞 1
					</div>
					<div class="view-stat">
						<i class="el-icon-star-off"></i>收藏 3
					</div>
					<div class="view-stat">
						<i class="el-icon-chat-line-round"></i>评价5
					</div>
				</div>

			</div>
		</div>
	    </div>
		<div v-if="collectionList.length==0">
			<el-empty description="暂无数据"></el-empty>
		</div>	
	</div>
</template>

<script>
	import {
		PersonManager
	} from "../../../request/personCenter.js"
	export default {
		data() {
			return {
				Activecollection: [],
				isactive:'',
				collectionList:[]
			}

		},
		created() {
			this.collectionCatalog();
		},
		methods: {
			collectionCatalog() {

				PersonManager.collectionCatalogs(1, 10).then(e => {
					console.log(e);
					this.Activecollection = e.data.data;
					if(this.Activecollection.length)
					{
						this.change(this.Activecollection[0]);
					}
				})
			},
			change(Item)
			{
			  this.isactive=Item.id;
			  PersonManager.catalogsPost(this.isactive,1,100).then(e=>{
				  console.log(e);
				  this.collectionList=e.data.data;
				  
			  })
			},
			DeletePost(id) {
				var _that = this
				this.$confirm('此操作视为取消收藏帖子,是否继续', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.axios
							.delete(
								'/collections/' + id, {
									headers: {
										token: localStorage.getItem("token"),
										'content-type': 'application/json'
									}
								}
							)
							.then(() => {
								this.$message({
									type: 'success',
									message: '已删除标签'
								})
								this.$router.go(0);
							})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '再考虑一下'
						})
					})
			},
			//跳转页面
			check(id) {
				// alert(id);
				this.$router.push({
					path: `/SurfaceDetails`,
					query: {
						id: id
					}
				});
			},

		}
	}
</script>

<style scoped="scoped">
	.title {
		margin: 20px 20px 10px;
	}

	.tabs {
		width: 100%;
		margin: 0 auto;
		height: 72px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		padding: 28px 30px;
		background-color: white;
	}

	.item-tab {
		width: 64px;
		height: 16px;
		margin-right: 1.875rem;
		font-size: 14px;
		font-weight: 400;
		color: #666;
		line-height: 16px;
		margin-right: 80 px;
		cursor: pointer;
		position: relative;
	}

	.actline {
		width: 50%;
		height: 2px;
		background: #03d3bd;
		position: absolute;
		left: 1px;
		top: 30px;
	}

	.favorites-card {
		border-bottom: 1px solid rgb(231, 231, 231);
		width: 100%;
		min-height: 96px;
		border-radius: 4px;
		background: rgb(255, 255, 255);
		padding: 24px 20px;
		margin-bottom: 0px;
		box-sizing: inherit;
		display: flex;

	}

	.favorites-cover {
		position: relative;
		float: left;
		border-radius: 4px;
		overflow: hidden;
		width: 154px;
		height: 96px;
		margin-right: 24px;
		box-sizing: inherit;
	}

	.favorites-cover img {
		width: 100%;
		height: 100%;
		border-radius: 4px;
		box-sizing: inherit;
		border-style: none;
	}

	.meta-footer {
		display: flex;
		font-size: 16px;
		box-sizing: inherit;
	}

	.meta-status {
		padding: 16px 0px 20px;
		font-size: 14px;
		color: rgb(80, 80, 80);
		line-height: 16px;
		display: flex;
		justify-content: space-between;

	}

	.favorites-meta {
		width: 95%;
	}

	.meta-view {
		margin-right: 2.25rem;
	}

	.meta-title {
		min-height: 24px;
		line-height: 24px;
		box-sizing: inherit;
		cursor: pointer;
	}

	.meta-footer {
		font-size: 16px;
		box-sizing: inherit;
	}

	.view-stat {
		color: rgb(153, 162, 170);
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		margin-right: 25px;
		box-sizing: inherit;
	}

	.active {
		font-weight: 600;
		color: #03d3bd;
	}
</style>
